<template>
  <view class="content">
    <view class="herder" :style="{ backgroundImage: 'url('+ detailsobj.image +')' }">
      <NavBar></NavBar>
    </view>
    <view class="card">
      <view class="card-top">
        <view>{{detailsobj.name}}</view>
        <text>分量充足 | 秘制风味 | 特色菜品</text>
      </view>
      <view class="card-conter">
        <text>月售{{detailsobj.sales_num}}+</text>
      </view>
      <view class="card-footer">
        <view class="card-money"><text>￥</text>{{detailsobj.sales_price || ''}}
          <text style="text-decoration: line-through;color: #999999;" v-if="false">￥69.90</text>
          <text style="margin-left: 10rpx;color: #999999;" v-if="false">打包费￥1.0/份</text>
        </view>
        <view class="increase-box">
          <view style="display: flex;">
            <view class="increase" @click.stop="upcart(detailsobj.sales_price)" v-if="cart"> <text
                class="iconfont icon-jian"></text> </view>
            <text style="margin: 0 20rpx;color: #000;" v-if="cart">{{number}}</text>
            <view class="increase" @click.stop="joincart(detailsobj.sales_price)"> <text
                class="iconfont icon-jiahao"></text> </view>
          </view>
        </view>
      </view>
    </view>
    <view class="details-card">
      <u-tabs :list="list1" @click="convert" lineColor='#025E21' :activeStyle="{
				  fontSize:'30rpx',
				  fontWeight: 'bold'
			  }" :inactiveStyle="{
				color: '#999999',
			}" lineWidth='30' itemStyle='padding:0 0px;height: 40px;'></u-tabs>
      <view class="introduce" v-if="title === 0">
        <view class="introduce-item">
          <text style="color:#999999;flex-shrink: 0;">商品介绍:</text>
          <view class="int-cont">{{detailsobj.brief}}</view>
        </view>
        <view class="prompt" v-for="(value, key, index) in detailsobj.attribute" :key="index">
          {{ key }}:
          <text style="margin-left: 20rpx; color: #000;">{{value}}</text>
        </view>
      </view>
      <view class="com-evaluate" v-else>
        <UserComment></UserComment>
      </view>
    </view>
    <TotalPrice @filetr='account' :heft='pi' :form='{id:detailsobj.id,num:number}'></TotalPrice>
    <u-toast ref="uToast"></u-toast>
    <FooterNavigation></FooterNavigation>
  </view>
</template>

<script>
  import navbar from '../component/navbar.vue'
  import totalprice from '../component/totalprice/index.vue'
  import usercomment from '../component/usercomment/index.vue'
  import http from '@/utils/http.js'
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        list1: [{
          name: '商品详情'
        }, 
        // {
        //   name: '评价'
        // },
        ],
        title: 0,
        detailsobj: {},
        cart: false,
        info: [],
        number: 0,
        pi: false
      }
    },
    components: {
      NavBar: navbar,
      TotalPrice: totalprice,
      UserComment: usercomment
    },
    methods: {
      ...mapMutations(['pricemd', 'emptymoney']),
      convert(item) {
        this.title = item.index
      },
      async detailsapi(id) {
        const res = await http({
          url: `/product/${id}`
        })
        this.detailsobj = res.data
      },
      joincart(money) {
        this.pricemd(Number(money))
        this.cart = true
        this.number++
        this.show = true
      },
      upcart(money) {
        this.pricemd(-money)
        this.number--
        if (this.number === 0) {
          this.cart = false
        }
      },
      account() {
        this.info[0] = {
          id: this.detailsobj.id,
          number: this.number
        }
        uni.navigateTo({
          url: `/page_ orderform/index?info=${JSON.stringify({type:1,goods:this.info})}`
        })
      }
    },
    onUnload() {
      if (!this.pi) {
        this.emptymoney()
      } else {
        this.$bus.$emit('returnobj', {
          id: this.detailsobj.id,
          num: this.number
        })
      }
    },
    onLoad(record) {
      if (record.number && record.number != 'undefined') {
        this.number = record.number
      }
      if (this.number > 0) this.cart = true
      const pages = getCurrentPages()
      this.detailsapi(record.id)
      this.pi = pages[pages.length - 2].route === "page_detailsbtn/index/index"
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fafafa;
  }

  .herder {
    height: 564rpx;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 0 40rpx;
  }

  .card {
    box-sizing: border-box;
    padding: 40rpx 30rpx;
    border-radius: 40rpx;
    background-color: #fff;

    .card-top {
      font-size: 36rpx;
      font-weight: bold;
      line-height: 48rpx;
      text-align: left;

      text {
        font-size: 24rpx;
        color: #999999;
        font-weight: 400;
      }
    }

    .card-conter {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999999;
      margin: 30rpx 0;

      .weight {
        color: #025E21;
        font-size: 24rpx;
        width: 153rpx;
        height: 60rpx;
        border-radius: 40rpx;
        opacity: 0.4;
        border: 1px solid #025E21;
        text-align: center;
        line-height: 60rpx;
        margin-right: 30rpx;
      }
    }

    .card-footer {
      width: 100%;
      display: flex;
      align-items: flex-end;
      color: #999999;
      font-size: 24rpx;
      justify-content: space-between;

      .card-money {
        font-size: 48rpx;
        color: #CC0022;
        margin-right: 20rpx;

        text {
          font-size: 24rpx;
        }
      }

      .increase-box {
        display: flex;

        .increase {
          width: 42rpx;
          height: 42rpx;
          background-color: #025E21;
          border-radius: 50%;
          line-height: 42rpx;
          text-align: center;
          color: #fff;

          image {
            width: 18rpx;
            height: 18rpx;
          }
        }
      }
    }
  }

  .details-card {
    margin-top: 20rpx;
    border-radius: 40rpx;
    background-color: #fff;
    padding: 0 20rpx 50rpx 20rpx;

    .introduce {
      font-size: 26rpx;
      min-height: 400rpx;

      .introduce-item {
        display: flex;
        margin-top: 30rpx;
        // margin-left: 80rpx;

        .int-cont {
          margin-left: 20rpx;
        }
      }

      .prompt {
        margin-top: 30rpx;
        // margin-left: 80rpx;
        color: #999999;
      }
    }

    .com-evaluate {
      height: 650rpx;
      padding: 0 30rpx;
    }
  }
</style>